<template>
<Modal :title="modalTitle"
        v-model="modalShow"
        :auto-close="false"
        :mask-closable="false">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <add-connect-form :dsConnect="dsConnect" ref="addConnectForm"></add-connect-form>
    <div class="ivu-modal-footer" slot="footer">
        <Button @click="testConnect" :loading="btnLoading">测试连接</Button>
        <Button type="primary" @click="save" :loading="btnLoading">确定</Button>
        <Button type="warning" @click="cancel" :disabled="btnLoading">取消</Button>
    </div>
</Modal>
</template>

<script>
import getData from 'getData'
import util    from 'util'

import AddConnectForm from './add-connect-form.vue'
export default {
    /**
     * @description 新增连接弹窗
     * @author zhangyuntao
     */

    name: 'add-connect',

    components: {
        AddConnectForm
    },

    data () {
        return {
            loading: false,
            modalTitle: '新增连接',
            modalShow: false,
            dsConnect: {

            },
            btnLoading: false,
        }
    },

    methods: {
        show(data) {
            if(data) {
                this.modalTitle = '编辑连接';
                this.loading = true;
                getData.get('getDsConnectDetail', {}, data.connectId).then(res => {
                    this.loading = false;
                    if (res.status == 200 && res.data.code == '000') {
                        this.dsConnect = res.data.data;
                    } else {
                        this.$Message.error('查询信息失败，请检查网络或联系管理员！');
                    }
                })
            } else {
                this.modalTitle = '新增连接';
                this.dsConnect = {};
            }
            this.modalShow = true;
        },
        testConnect() {
            this.btnLoading = true;
            this.$refs.addConnectForm.test(res => {
                this.btnLoading = false;
            });
        },
        save() {
            this.btnLoading = true;
            this.$refs.addConnectForm.save( res => {
                this.btnLoading = false;
                if (res) {
                    if(res.status == 200 && res.data.code == '000') {
                        this.$Message.success(this.modalTitle + '成功！');
                        this.$emit('refresh');
                        this.cancel();
                    } else {
                        this.$Message.error(this.modalTitle + '失败，请检查网络或联系管理员!');
                        console.error(res);
                    }
                }
            });
        },
        cancel() {
            this.$refs.addConnectForm.resetFields();
            this.modalShow = false;
        }
    }
}
</script>

<style lang="less">
.add-connect-wrapper {
    .normal-input {
        width: 388px;
    }
    .normal-input-area {
        width: 388px;
    }
}
</style>
